<!DOCTYPE html>
<html>
<head>
		<meta charset="UTF-8">
		<title>QQ彩贝导航</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#d{
				background:#f1f1f1 ;
			}
			.clear:after{
				content: '';
				display: block;
				clear: both;
			}
			#d1{
				float: left;
				margin: 20px 10px 5px 60px;
				
			}
			#d ul{
				float: left;
				list-style: none;
				margin-left:100px;
				margin-top: 30px;
			}
			#d ul li{
				float: left;
				margin-left: 20px;
				padding-right: 20px;
				position: relative;
				font-size: 16px;
				border-right: 1px solid #54a0de;
			}
			#d ul li:last-of-type{
				border: none;
			}
			#d ul li a{
				text-decoration: none;
				color:#000033 ;
			}
			#d ul li a:hover{
				color: red;
			}
			
			#d ul li #img1,
			#d ul li #img2,
			#d ul li #img3,
			#d ul li #img4{
				position: absolute;
				top: -20px;
				left: 0px;
			}
			#d #d2{
				float: right;
				margin-top: 28px;
				margin-right: 120px;
			}
			#d #d2 img{
				display: inline-block;
				margin-right: 15px;
			}
			#d ul li #img2,
			#d ul li #img4{
				display: none;
			}
			@keyframes appear{
				from{width: 0;}
				33% {width: 23px;}
				66% {width: 46px;}
				to {width: 69px;}
			}
			#d ul li a:hover #img2,
			#d ul li a:hover #img4{
				display: block;
				animation-name:appear ;
				animation-duration: 1s;
				animation-timing-function: linear;				
			}
			#d #d2 img:hover{
				transform:rotate(360deg);
				transition: all 1s linear;
			}
			
		</style>
	</head>
	<body>
		<div id="d" class="clear">
			<div id="d1">
				<img src="img/logo_170x46.png"/>
			</div>
			<ul class="clear">
				<li>
					<a href="">
						返回商城
					<img id="img1" src="img/header_03.png"/>
					<img id="img2" src="img/header_05.png" />
					</a>
				<>
				<li><a href="">商旅频道</a><>
				<li>
					<a href="">积分商城
					<img id="img3" src="img/header_07.png"/>
					<img id="img4" src="img/header_09.png"/>
					</a>
				<>
				<li><a href="">商旅频道</a><>
				<li><a href="">了解频道</a><>
				<li><a href="">彩贝活动</a><>
				<li><a href="">个人中心</a><>
			</ul>
			<div id="d2">
				<img  src="img/iconsB_11.gif"/>
				<img  src="img/iconsB_12.gif"/>
				<img  src="img/iconsB_13.png"/>
			</div>
		</div>
	</body>
</html>
